<template>
  <div>
    <div class="page-title">任务管理</div>
    <div class="page-content">
      <el-form
        :inline="true"
        :model="filterQuery"
        @submit.native.prevent="handleSearch">
        <el-form-item>
          <el-select v-model="filterQuery.status" placeholder="任务状态" clearable>
            <el-option v-for="item in states" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type='submit' icon='el-icon-search'>查询</el-button>
        </el-form-item>
        <el-form-item>
          <router-link :to='{name: "TaskNew"}' >
            <el-button icon='el-icon-plus' native-type='button'>新增</el-button>
          </router-link>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%" >
        <el-table-column label="#">
          <template slot-scope="scope">
            <font>{{scope.$index + 1}}</font>
          </template>
        </el-table-column>
        <el-table-column label="任务名称" prop="taskName" ></el-table-column>
        <el-table-column label="负责人" prop="leader"></el-table-column>
        <el-table-column label="状态" prop="status"> </el-table-column>
        <el-table-column label="地点" prop="address"> </el-table-column>
        <el-table-column label="操作" align="center" header-align="center" width="180px"  fixed="right">
          <template slot-scope="scope">
            <div class="inline-td">
              <router-link :to='{name: "TaskEdit", params: {id: scope.row.taskID}}'>
                <el-button size="mini" icon="el-icon-edit-outline">修改</el-button>
              </router-link>
              &nbsp;&nbsp;
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteTask(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="filterQuery.pageIdx"
          :page-size="filterQuery.pageSize"
          :total="total"
          background
          layout="prev, pager, next"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {GetTasksList, DeleteTask} from '../../services/task'
import {GetDictionary} from '../../services/dictionary'

const DefaultQuery = {
  status: '',
  issueDate1: '',
  issueDate2: '',
  pageIdx: 1,
  pageSize: 20
}

export default {
  data () {
    return {
      filterQuery: {},
      total: 0,
      loading: false,
      dateRange: '',
      tableData: [],
      states: []
    }
  },
  mounted () {
    this.loadFilterParams() //加载默认条件
    this.getStatusDict()
    this.handleGetListData()
  },
  methods: {
    handleSearch () {
      this.filterQuery.pageIdx = 1
      this.handleGetListData()
    },
    handleGetListData () {
      //整理筛选条件
      this.checkFilterParams()
      this.loading = true
      //为了保存过滤条件,我们通过路由的history能力,更换url,从子页面返回的时候,能还原当前条件下的内容
      this.$router.push({name: 'Tasks', query: this.filterQuery})

      //接口函数,then后面的回调表示成功所执行的内容,catch后面表示错误时所执行的内容
      GetTasksList(this.filterQuery).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.filterQuery.pageIdx = res.data.page
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
        this.loading = false
      })
    },
    handlePageChange (page) {
      this.filterQuery.pageIdx = page
      this.handleGetListData()
    },
    getStatusDict () {
      GetDictionary({name: "任务状态"}).then((res) => {
        this.states = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    handleDeleteTask (item) {
      this.$confirm('此操作将永久删除该任务数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteTask(item.taskID).then(() => {
          this.handleGetListData()
        }, (err) => {
          this.$message.error(err.message)
        })
      }).catch(() => {
      })
    },
    //为了保存过滤条件,利用路由的history能力,更换url,从子页面返回的时候,能还原当前条件下的内容
    loadFilterParams () {
      //从query读取过滤条件
      this.filterQuery = {...DefaultQuery, ...this.$route.query}
      //从query中取到的参数是string的,要转成element要求的number
      this.filterQuery = {
        ...this.filterQuery,
        pageIdx: parseInt(this.filterQuery.pageIdx, 10),
        pageSize: parseInt(this.filterQuery.pageSize, 10),
      }
      //填充datepicker range组件的内容
      if (this.filterQuery.issueDate1 && this.filterQuery.issueDate2) {
        this.dateRange = [this.filterQuery.issueDate1, this.filterQuery.issueDate2]
      }
    },
    checkFilterParams () {
      //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
      if (this.dateRange && this.dateRange.length === 2) {
        this.filterQuery.issueDate1 = this.dateRange[0]
        this.filterQuery.issueDate2 = this.dateRange[1]
      } else {
        this.filterQuery.issueDate1 = ''
        this.filterQuery.issueDate2 = ''
      }
    }
  }
}
</script>